const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出',
    }),
      // 提取css成单独文件
      new MiniCssExtractPlugin({
        // 定义输出文件名和目录
        filename: "static/css/main.css",
      }),
       // css压缩
    new CssMinimizerPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
   // 开发服务器
   devServer: {
    host: "localhost", // 启动服务器域名
    port: "3234", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
 };